<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin:0px;
				padding:0px;
			}
			a:link{
				color:white;
				text-decoration: none;
			}
			a:hover{
				color:blue;
			}
			.box{
				background:#666;
			}
			ul{
				width:960px;
				margin:0 auto;
			}
			li{
				display:inline-block;	
			}
			li:nth-of-type(2),li:nth-of-type(9){
				margin-left:20px;
			}
			li:nth-of-type(10){
				margin-left:10px;
			}
			li:nth-of-type(n+9){
				padding:10px 16px;
				border:1px solid gold;
				color:gold;
				border-radius:50px;
			}
			li:nth-of-type(n+9):hover{
				
				background:gold;
			}
			li:nth-of-type(n+3):nth-of-type(-n+8){
				margin-left:10px;
			}
			img{
				width:160px;
				vertical-align: middle;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<ul>
			<li>
				<a href="#"><img src="logo.png" /></a>
			</li>
			<li>
				<a href="#">功能特权</a>
			</li>

			<li>
				<a href="#">游戏特权</a>
			</li>

			<li>
				<a href="#">生活特权</a>
			</li>

			<li>
				<a href="#">会员活动</a>
			</li>

			<li>
				<a href="#">成长体系</a>
			</li>

			<li>
				<a href="#">年费专区</a>
			</li>

			<li>
				<a href="#">超级会员</a>
			</li>

			<li>
				<a href="#">登录</a>
			</li>
			<li>
				<a href="#">开通超级会员</a>
			</li>
		</ul>
		</div>
	</body>

</html>